<template>
  <main class="container">
    <img class="nyImg" src="../../assets/images/ym/1.jpg" />
    <img class="nyImg" src="../../assets/images/ym/2.jpg" />
    <img class="nyImg" src="../../assets/images/ym/3.jpg" />
    <img class="nyImg" src="../../assets/images/ym/4.jpg" />
    <img class="nyImg" src="../../assets/images/ym/5.jpg" />
    <img class="nyImg" src="../../assets/images/ym/6.jpg" />
    <img class="nyImg" src="../../assets/images/ym/7.jpg" />
    <img class="nyImg" src="../../assets/images/ym/8.jpg" />
    <!-- mobile -->
    <div class="msgBox">
      <div class="inputArea" ref="targetDOM">
        <div>
          <div class="item">
            <md-input-item class="inputItem" placeholder="请输入姓名" v-model="name"></md-input-item>
          </div>
          <div class="item" style="margin-top:.3rem">
            <md-input-item class="inputItem" type="phone" v-model="phone" placeholder="请输入手机号"></md-input-item>
          </div>
        </div>
        <md-button type="warning" size="small" round class="joinButton" @click="submit">提交加盟资料</md-button>
      </div>
      <div class="tips">
        <div>技术支持：江门市蓬江区行通商贸有限公司 粤ICP备18134847号</div>
      </div>
      <img class="nyImg" style="vertical-align: middle" src="../../assets/images/ym/9.png" />
    </div>
    <div class="mobile">
      <md-button type="default" icon="phone" class="submit" round @click.native="phoneCall">拨打VIP专线</md-button>
      <md-button type="default" icon="message" class="submit" round @click.native="scrollTo">获取加盟资料</md-button>
    </div>
  </main>
</template>

<script>
import { InputItem, Field, Button, Dialog } from "mand-mobile";
export default {
  computed: {},
  name: "ny",
  components: {
    [Button.name]: Button,
    [InputItem.name]: InputItem,
    [Field.name]: Field
  },
  data() {
    return {
      name: "",
      phone: "",
      joinButtonStatus: true,
      submitStatus: true
    };
  },
  created() {
    document.title = "一鸣鲜奶";
    window.scroll(0, 0);
  },
  mounted() {},
  methods: {
    phoneCall() {
      window.location.href = "tel:400-169-0574";
    },
    scrollTo() {
      this.$nextTick(() => {
        this.$refs.targetDOM.scrollIntoView();
      });
    },
    submit() {
      let self = this;
      if (!this.name) {
        Dialog.alert({
          title: "提示",
          content: "请输入您的姓名",
          cancelText: "取消",
          confirmText: "确定"
        });
        return false;
      }
      if (!this.phone) {
        Dialog.alert({
          title: "提示",
          content: "请输入您的手机号码",
          cancelText: "取消",
          confirmText: "确定"
        });
        return false;
      }
      this.axios
        .post("https://crm.jushizhen.net/platform/message/report", {
          name: this.name,
          phone: this.phone,
          sourcePage: window.location.href,
          project: 116,
          content: "我要申请加盟"
        })
        .then(function(res) {
          if (res.data.code != 200) {
            Dialog.failed({
              title: "提示",
              content: res.data.msg,
              confirmText: "确定",
              closable: false,
              onConfirm: () => console.log("[Dialog.succeed] confirm clicked")
            });
            return false;
          }
          Dialog.succeed({
            title: "提示",
            content: "提交成功",
            confirmText: "确定",
            closable: false,
            onConfirm: () => console.log("[Dialog.succeed] confirm clicked")
          });
        })
        .catch(function(err) {
          Dialog.failed({
            title: "提示",
            content: "提交失败",
            confirmText: "确定",
            onConfirm: () => console.log("[Dialog.failed] confirm clicked")
          });
        });
    }
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.nyImg {
  width: 100%;
}

.container {
  display: flex;
  flex-direction: column;
}

.submit {
  font-weight: bold;
  width: 3.2rem;
  text-align: center;
  font-size: 0.28rem;
  height: 0.8rem;
  &::after {
    display: none;
  }
}

.tips {
  font-size: 0.24rem;
  position: absolute;
  bottom: 0.6rem;
  left: 0;
  right: 0;
}

.inputItem {
  padding-left: 0.3rem;
  &::before {
    display: none;
  }
}

.joinButton {
  margin-top: 0.3rem;
  font-size: 0.28rem;
  color: #fff;
  width: 2.6rem;
  &::after {
    display: none;
  }
}

.mobile {
  display: flex;
  position: fixed;
  bottom: 0;
  padding: 0.2rem 0;
  justify-content: space-around;
  background: #ffcc03;
  width: 100%;
}

.item {
  display: flex;
  align-items: center;
  flex: 1;
  width: 4.4rem;
  height: 0.7rem;
  border-radius: 4px;
  background: #fff;
}

.inputArea {
  position: absolute;
  display: flex;
  flex-direction: column;
  margin-top: 2.7rem;
  left: 0.8rem;
  right: 0.8rem;
  align-items: center;
  justify-content: center;
}

.msgBox {
  position: relative;
  margin-bottom: 1rem;
}
</style>